import { TabBar } from "antd-mobile";
import "./Tabbar.css";
import Home from "../Home/Home";
import React from "react";
import Find from "../Find/Find";
import My from "../My/My";
import Headline from "../Headline/Headline";
class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "blueTab",
      hidden: false,
      fullScreen: true,
    };
  }
  render() {
    return (
      <div
        style={
          this.state.fullScreen
            ? { position: "fixed", height: "100%", width: "100%", top: 0 }
            : { height: 400 }
        }
      >
        <TabBar
          unselectedTintColor="#949494"
          // tintColor="#33A3F4"
          tintColor="#12c287"
          barTintColor="white"
          // hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/home.png) center center /  21px 21px no-repeat",
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/home_on.png) center center /  21px 21px no-repeat",
                }}
              />
            }
            selected={this.state.selectedTab === "blueTab"}
            // badge={1}
            onPress={() => {
              this.setState({
                selectedTab: "blueTab",
              });
            }}
            data-seed="logId"
          >
            {/* {this.renderContent("Life")} */}
            <Home></Home>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/toutiao.png) center center /  21px 21px no-repeat",
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/toutiao_on.png) center center /  21px 21px no-repeat",
                }}
              />
            }
            title="头条"
            key="Koubei"
            // badge={"new"}
            selected={this.state.selectedTab === "redTab"}
            onPress={() => {
              this.setState({
                selectedTab: "redTab",
              });
            }}
            data-seed="logId1"
          >
            {/* {this.renderContent("Koubei")} */}
            <Headline></Headline>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/find.png) center center /  21px 21px no-repeat",
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: "22px",
                  height: "22px",
                  background:
                    "url(https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/find_on.png) center center /  21px 21px no-repeat",
                }}
              />
            }
            title="发现"
            key="Friend"
            // dot
            selected={this.state.selectedTab === "greenTab"}
            onPress={() => {
              this.setState({
                selectedTab: "greenTab",
              });
            }}
          >
            {/* {this.renderContent("Friend")} */}
            <Find></Find>
          </TabBar.Item>
          <TabBar.Item
            icon={{
              uri:
                "https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/my.png",
            }}
            selectedIcon={{
              uri:
                "https://static.zhongan.com/website/assets/m/v3/home/assets/images/icon/my_on.png",
            }}
            title="我的"
            key="my"
            selected={this.state.selectedTab === "yellowTab"}
            onPress={() => {
              this.setState({
                selectedTab: "yellowTab",
              });
            }}
          >
            {/* {this.renderContent("My")} */}
            <My></My>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default TabBarExample;
